<template>
  <div>
    <div
      class="scroll"
      :style="{ border: 'dashed 1px #ddd', padding: `${layout.视图边距}px`, height: `${winHeight - 232}px` }"
    >
      <a-row :gutter="layout.左右间距">
        <a-col :offset="c.offset" :span="c.span" v-for="(c, i) in columns" :key="`column${i}`">
          <div :class="layout.标签对齐 === 'top' ? '' : 'flx-s'" :style="{ marginBottom: `${layout.上下间距}px` }">
            <div
              :class="layout.标签对齐 === 'right' ? 'tar' : 'tal'"
              class="mr10"
              :style="{ width: `${layout.标签宽度}px` }"
            >
              {{ c.name }}
            </div>
            <div class="flx-1" :class="layout.标签对齐 === 'top' ? 'mt10' : ''">
              <div v-if="c.isCal" class="info fs12">【计算属性】</div>
              <div v-else>
                <ZgInput v-model="obj[c.code]" disabled></ZgInput>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <!-- 子表回显：每个子表一个tab，表格只读 -->
      <a-tabs v-if="subDiyForm.length > 0" class="mt20">
        <a-tab-pane v-for="(sub, subIdx) in subDiyForm" :key="sub.id" :tab="sub.name">
          <a-table :data-source="subObjList[subIdx]" :pagination="false" :rowKey="(record, idx) => idx">
            <a-table-column v-for="c in sub.columns" :key="c.code" :title="c.name" :dataIndex="c.code">
              <template slot-scope="text, record">
                <span>{{ record[c.code] }}</span>
              </template>
            </a-table-column>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { columnMixin } from '../../autoform/column/js/mixin'

export default {
  mixins: [columnMixin],
  props: {
    formView: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      layout: {
        标签对齐: 'right',
        标签宽度: 100,
        左右间距: 10,
        上下间距: 10,
        视图边距: 10
      },
      columns: [],
      obj: {},
      subDiyForm: [],
      subObjList: []
    }
  },
  methods: {
    initData () {
      if (this.formView.active) {
        this.$http.post(
          '/zg-autoform/view/get',
          { viewId: this.formView.active, stepInstCode: this.formView.stepInstCode },
          (res) => {
            // 初始化默认值
            if (res.diyView.layout) {
              this.layout = JSON.parse(res.diyView.layout)
              if (res.allColumns && res.allColumns.length > 0) {
                this.columns = res.viewInfoList
                // 渲染表单
                this.obj = res.allColumns.reduce((x, item) => {
                  // 设置 compType 以便调用 initDefaultVal
                  this.compType = item.compType
                  // 调用 mixin 中的 initDefaultVal 方法进行类型转换并直接使用返回值
                  x[item.code] = this.initDefaultVal(item.defaultVal)
                  return x
                }, {})
              }
              // 子表回显逻辑
              if (Array.isArray(res.subDiyForm)) {
                this.subDiyForm = res.subDiyForm
                // 兼容两种来源：res.subInfo 或 subDiyForm.columnData
                if (Array.isArray(res.subInfo) && res.subInfo.length > 0) {
                  this.subObjList = res.subDiyForm.map(sub => {
                    const info = res.subInfo.find(si => si.subTableCode === sub.code)
                    if (info && Array.isArray(info.subTableData)) {
                      return info.subTableData
                    } else if (Array.isArray(sub.columnData) && sub.columnData.length > 0) {
                      return sub.columnData
                    } else {
                      return []
                    }
                  })
                } else {
                  this.subObjList = res.subDiyForm.map(sub => Array.isArray(sub.columnData) ? sub.columnData : [])
                }
              } else {
                this.subDiyForm = []
                this.subObjList = []
              }
            }
          }
        )
      }
    }
  }
}
</script>

<style scoped>
</style>
